<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue如何监测数组的修改</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<button @click="changePerson">修改海洋的信息</button>
			<ul>
				<li v-for="s in school.students" :key="s.id">
					{{s.name}} - {{s.age}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			let vm = new Vue({
				el:'#demo',
				data:{
					school:{
						students:[
							{id:'taj87y87',name:'刘海洋',age:18},
							{id:'taj87y67',name:'张宁宁',age:18},
							{id:'taj87y78',name:'陈诗曼',age:20}
						]
					}
				},
				methods:{
					changePerson(){
						this.school.students.splice(0,1,{id:'taj87y87',name:'lihaiyang',age:19})
						// console.log(this.school.students.push === Array.prototype.push)
					}
				}
			})
		</script>
	</body>
</html>